<template>
  <div>
    <el-table :data="orders" style="width: 100%">
      <el-table-column
        prop="orderDate"
        label="订单创建日期"
        width="180"
      ></el-table-column>
      <el-table-column prop="status" label="状态" width="120"></el-table-column>
      <el-table-column label="总价">
        <template #default="scope">
          {{ scope.row.totalAmount }}
        </template>
      </el-table-column>
      <el-table-column label="详细内容">
        <template #default="scope">
          <el-button
            type="text"
            @click="showDetails(scope.$index)"
            >View Details</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" title="Book Details">
      <el-table :data="bookDetail" style="width: 100%; margin-top: 20px">
        <el-table-column prop="bookId" label="书籍Id"></el-table-column>
        <el-table-column prop="quantity" label="购买数量"></el-table-column>
        <el-table-column prop="unitPrice" label="单价"></el-table-column>
        <el-table-column prop="totalPrice" label="总价"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import API from "../../api/API";
import { definedUser } from "@/store/store";
export default {
  name: "Order",
  data() {
    return {
      userId: definedUser().userId,
      orders: [],
      dialogVisible: false,
      bookDetail: {},
    };
  },
  mounted() {
    API.getOrders(this.userId)
      .then((response) => {
        this.orders = response.data.data;
        console.log("create");
      })
      .catch((error) => {
        console.error("Error fetching categories:", error);
      });
  },

  created() {},
  methods: {
    calculateTotalPrice(item) {
      return item.quantity * item.unitPrice;
    },
    showDetails(index) {
      this.bookDetail = this.orders[index].orderItems.map(item => ({
        ...item,
        totalPrice: this.calculateTotalPrice(item),}));
      this.dialogVisible = true;
    },
  },
};
</script>

<style>
.h2 {
  color: #91ab96;
}
</style>
